<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



    <table cellspacing="10">

        <tr>
            <td align="right">生日:</td>
            <td>
                <select id="selecty" onchange="changeDay()">
                </select>年
                <select id="selectm" onchange="changeDay()">
                </select>月
                <select id="selectd">
                </select>日
            </td>
        </tr>

    </table>


    <script>

        function changeDay() {
            var selectYValue = document.getElementById("selecty").value
            var selectMValue = document.getElementById("selectm").value

            // 28 29 39 31

            // 1,3,5,7,8,10,12 -> 31
            // 4, 6, 9 , 11 -> 30

            // 2 -> 闰年 -> 29
            //   -> 非闰年 -> 28

            if (selectMValue == '1' || selectMValue == '3' || selectMValue == '5' || selectMValue == '7'
                || selectMValue == '8' || selectMValue == '10' || selectMValue == '12'){

                console.log("31天")
                day(31);

            } else if (selectMValue == '4' || selectMValue == '6' || selectMValue == '9' || selectMValue == '11' ){
                console.log("30天")
                day(30);
            }  else {
                // 2月
                if (selectYValue % 4 == 0){
                    // 闰年
                    console.log("29天")
                    day(29);
                } else {
                    // 非闰年
                    console.log("28天")
                    day(28);
                }
            }
        }


        function day( num ) {
            var selectDNode = document.getElementById("selectd")

            selectDNode.innerText = ""


            for (var i = 1 ; i<= num ; i++) {
                var textNode = document.createTextNode(i)
                var optionNode = document.createElement("option")
                optionNode.appendChild(textNode);
                selectDNode.appendChild(optionNode)
            }

        }



        function initY() {
            var selectYNode = document.getElementById("selecty")
            for (var i = 2023; i >=1949 ; i--) {
                var textNode = document.createTextNode(i)
                var optionNode = document.createElement("option")
                optionNode.appendChild(textNode);
                selectYNode.appendChild(optionNode)
            }
        }

        function initM() {
            var selectMNode = document.getElementById("selectm")
            for (var i = 1 ; i<=12 ; i++) {
                var textNode = document.createTextNode(i)
                var optionNode = document.createElement("option")
                optionNode.appendChild(textNode);
                selectMNode.appendChild(optionNode)
            }
        }
        function initD() {
          day(31);
        }


        initY();
        initM();
        initD()
    </script>



</body>
</html>
